<template>
    <el-main>
        <el-card shadow="never">
            <el-tabs tab-position="top" v-model="state.tabName" @tab-change="handleClick">
                <el-tab-pane :label="$t('火山翻译配置')" name="lang">
                    <el-form
                        ref="formRef"
                        :model="state.form"
                        label-width="100px"
                        style="margin-top: 20px"
                    >
                        <el-form-item label="AccessKey">
                            <el-input v-model="state.form.huoAccessKey"></el-input>
                            <div class="el-form-item-msg">
                                机器翻译仅支持火山翻译，注册地址https://console.volcengine.com，在访问控制里面新建api密钥
                            </div>
                        </el-form-item>
                        <el-form-item label="SecretKey">
                            <el-input v-model="state.form.huoSecretKey"></el-input>
                            <div class="el-form-item-msg">
                                机器翻译仅支持火山翻译，注册地址https://console.volcengine.com，在访问控制里面新建api密钥
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit">{{ $t('保存') }}</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>
</template>

<script lang="ts" setup>
import setting from '@/api/modules/setting.ts'

defineOptions({ name: '翻译配置' })

const formRef = ref()

const state = reactive({
    tabName: 'lang',
    form: {
        huoAccessKey: '',
        huoSecretKey: ''
    }
})

onMounted(() => {
    list('lang')
})

function handleClick(tab: any) {
    state.tabName = tab
    list(tab)
}

async function list(groupName: string) {
    const res = await setting.config.list.get({ groupName: groupName })
    Object.assign(state.form, res)
}

async function submit() {
    await formRef.value!.validate()

    await setting.config.edit.post({
        groupName: state.tabName,
        data: state.form
    })
}
</script>

<style></style>
